<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-11-03 17:46:23
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-11-05 10:46:11
-->
<template>
  <div class="section-view">
    <div class="section-view__header">
      <div class="header-left">
        <el-input
          v-model="form.title"
          autocomplete="off"
          size="small"
          placeholder="输入标题"
        />
        <el-date-picker
          v-model="form.timers"
          type="daterange"
          size="small"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="header-right">
        <el-button size="small" class="el-submit-btn" type="primary" @click="initTable">查询</el-button>
        <el-button
          size="small"
          class="el-reset-btn"
          type="primary"
          @click="
            form = {
              page: 1,
              limit: 10
            }
          "
        >
          清空条件
        </el-button>
      </div>
    </div>
    <div class="section-view__body">
      <div class="section-view__operation">
        <el-button type="primary" size="small" @click="openDialog({}, 'info')">新增</el-button>
        <!-- <el-button type="danger" size="small" @click="deleteRow">删除</el-button> -->
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :selection-change="changeFun"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
        /> -->
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="imgUrl"
          label="封面"
        >
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.imgUrl"
              style="max-width: 100px; max-height: 100px"
              :src="scope.row.imgUrl"
              :fit="'contain'"
            >
              <div slot="error" class="image-slot">封面加载失败</div>
            </el-image>
            <p v-else>未上传图片</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="imgUrl"
          label="视频"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="searchVideo(scope.row)">点击查看视频</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="openDialog(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="deleteRow(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="secton-view__page">
        <el-pagination
          v-if="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="initTable"
        />
      </div>
    </div>
    <el-dialog
      :title="row.id ? '编辑咨询' : '新增咨询'"
      width="760px"
      :close-on-click-modal="false"
      :visible.sync="infoDialogVisible"
    >
      <div class="dialog-body">
        <el-form ref="bannerForm" :model="editForm" class="edit-form">
          <div class="edit-form__right">
            <el-form-item
              label="标题："
              :label-width="'120px'"
              prop="title"
              :rules="[
                {
                  required: true,
                  pattern: $utils.characters,
                  message: '请输入正确的标题',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="editForm.title" autocomplete="off" maxlength="100" />
            </el-form-item>
            <el-form-item
              label="封面："
              :label-width="'120px'"
              prop="imgUrl"
              :rules="[
                {
                  required: true,
                  message: '请输入上传封面',
                  trigger: 'change'
                }
              ]"
            >
              <UploadImg :handle-success="handleSuccess" :image-url="imgUrl" />
            </el-form-item>
            <el-form-item
              label="视频："
              :label-width="'120px'"
              prop="videoUrl"
            >
              <UploadVideo :handle-success-video="handleSuccessVideo" :file-list="videoList" />
            </el-form-item>
            <el-form-item
              label="视频地址："
              :label-width="'120px'"
              prop="videoUrl"
            >
              <el-input v-model="editForm.videoUrl" autocomplete="off" maxlength="100" />
            </el-form-item>
            <el-form-item
              label="视频长度："
              :label-width="'120px'"
              prop="timeLength"
            >
              <el-input v-model="editForm.timeLength" autocomplete="off" maxlength="100" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="视频查看"
      width="760px"
      :close-on-click-modal="false"
      :visible.sync="videoDialogVisable"
      :before-close="closeVideo"
    >
      <div class="dialog-body">
        <video-player
          v-if="videoDialogVisable"
          ref="videoPlayer"
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="playerOptions"
          style="width: 100%;height: 100%"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from '@/components/UploadImg'
import UploadVideo from '@/components/UploadVideo'

export default {
  name: '',
  components: {
    UploadImg,
    UploadVideo
  },
  props: {},
  data() {
    return {
      row: {},
      tableData: [],
      treeData: [],
      editForm: {
        content: ''
      },
      multipleSelection: [],
      imgUrl: '',
      videoList: [],
      videoDialogVisable: false,
      infoDialogVisible: false,
      defaultProps: { children: 'children', label: 'title' },
      total: 0,
      form: {
        title: '',
        page: 1,
        limit: 10
      },
      playerOptions: {
        // videojs options
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        poster: ''
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.initTable()
  },
  methods: {
    initTable(page) {
      if (typeof page !== 'number') {
        this.form.page = 1
      }
      const form = JSON.parse(JSON.stringify(this.form))
      if (form.timers) {
        form.startTime = form.timers[0]
        form.endTime = form.timers[1]
      } else {
        form.startTime = ''
        form.endTime = ''
      }
      delete form.timers
      this.$http.get('/video/queryForPage', {
        data: form
      }).then((res) => {
        if (res.success) {
          console.log(res)
          this.total = res.count
          this.tableData = res.data || []
        }
      })
    },
    changeFun(val) {
      this.multipleSelection = val
    },
    async openDialog(row, type) {
      this.row = row
      this.imgUrl = row.imgUrl
      this.infoDialogVisible = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    async submit() {
      console.log(this.editForm)
      this.$refs['bannerForm'].validate(valid => {
        if (valid) {
          this.$http.post('/video/save', this.editForm).then((res) => {
            if (res.success) {
              this.$message.success(res.msg)
              this.infoDialogVisible = false
              this.initTable()
              this.row = {}
              this.editForm = {}
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    setRoleList() {
      const ids = this.$refs.tree.getCheckedNodes().map(v => {
        return v.id
      })
      const menuIds = this.$refs.tree.getHalfCheckedNodes().map(v => {
        return v.id
      })
      this.$api.sysManageApi
        .roleMenuSaveOrUpdate({
          roleId: this.row.id,
          checkedMenuIds: [...menuIds, ...ids].join()
        })
        .then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.row = {}
        })
    },
    handleSuccess(res, file) {
      this.imgUrl = URL.createObjectURL(file.raw)
      this.editForm.imgUrl = res.data.filePath
    },
    handleSuccessVideo(res, playTime) {
      this.editForm.videoUrl = res.data.filePath
      // this.editForm.timeLength = playTime
    },
    searchVideo(row) {
      this.videoDialogVisable = true
      this.playerOptions.sources[0].poster = row.imgUrl || ''
      this.playerOptions.sources[0].src = row.videoUrl || ''
    },
    closeVideo() {
      this.$refs.videoPlayer.dispose()
      this.playerOptions.sources[0].poster = ''
      this.playerOptions.sources[0].src = ''
      this.videoDialogVisable = false
    },
    deleteRow(row) {
      if (row.id) {
        this.$confirm('确认删除吗？')
          .then(() => {
            this.$http.post('/video/delete', {
              id: row.id
            }).then((res) => {
              if (res.success) {
                this.$message.success(res.msg)
                this.initTable()
              }
            })
            // this.$api.sysManageApi
            //   .deletRole({
            //     id: row.id
            //   })
            //   .then(v => {
            //     this.$message.success(v.msg)
            //     this.initTable()
            //   })
          })
          .catch(() => {})
      } else if (this.multipleSelection.length) {
        this.$confirm('确认删除吗？')
          .then(() => {
            this.$api.sysManageApi
              .deletRoles({
                ids: this.multipleSelection
                  .map(v => {
                    return v.id
                  })
                  .join()
              })
              .then(v => {
                this.$message.success(v.msg)
                this.initTable()
              })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.video-player {
  width: 100% !important;
  height: 400px !important;
  &::v-deep .video-js {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
